<template>
  <el-dialog
    class="common-dialog"
    :title="title"
    :visible="showDialog"
    width="750px"
    destroy-on-close
  >
    <el-form
      ref="form"
      class="form"
      :model="form"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="会员手机" class="form-item" prop="mobile">
        <el-input
          class="input-item"
          v-model="form.mobile"
          v-focus
          placeholder="请输入会员手机号码"
          clearable
          maxlength="20"
        />
      </el-form-item>
      <el-form-item
        label="会员名称"
        class="form-item"
        prop="nickname"
        v-if="actionType === 'add'"
      >
        <el-input
          class="input-item"
          v-model="form.nickname"
          v-focus
          placeholder="请输入会员名称"
          clearable
          maxlength="20"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmDialog()"> 确认 </el-button>
      <el-button @click="close()"> 取消 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getMemberInfo, addMember } from "@/api/cashier/member";
export default {
  props: {
    actionType: {
      type: [String],
      default: () => "",
    },
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
  },
  // 自动获取焦点
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  watch: {
    showDialog(value) {
      if (value) {
        this.form.mobile = "";
        this.form.nickname = "";
      }
    },
  },
  data() {
    return {
      title: this.actionType === "add" ? "添加会员" : "关联会员",
      loading: false,
      form: { mobile: "", nickname: "" },
      rules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            required: true,
            pattern:
              /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    confirmDialog() {
      if (this.actionType === "add") {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.doAdd();
          } else {
            return false;
          }
        });
      } else {
        this.doSwitch();
      }
    },
    doSwitch() {
      const mobile = this.form.mobile.trim();
      if (mobile.length > 0) {
        getMemberInfo({ mobile: mobile })
          .then((response) => {
            console.log(response);
            if (response.data.data.vipUserId) {
              this.$emit("doSwitchMember", {
                mobile: mobile,
                vipUserId: response.data.data.vipUserId,
                points: response.data.data.points,
              });
            } else {
              this.$alert("未查询到该会员信息，请确认！");
              return false;
            }
          })
          .catch((res) => {
            this.$alert(res.data.errmsg);
          });
      } else {
        this.$alert("请先输入会员手机号！");
      }
    },
    doAdd() {
      const mobile = this.form.mobile.trim();
      const nickname = this.form.nickname.trim();
      if (mobile.length > 0) {
        addMember({ mobile: mobile, nickname: nickname })
          .then((response) => {
            console.log(response);
            if (response.data.data.vipUserId) {
              this.$emit("doSwitchMember", {
                mobile: mobile,
                vipUserId: response.data.data.vipUserId,
              });
            } else {
              this.$alert("添加会员失败，请确认！");
              return false;
            }
          })
          .catch((res) => {
            this.$alert(res.data.errmsg);
          });
      } else {
        this.$alert("请先输入会员手机号！");
      }
    },
    close() {
      this.$emit("closeMemberDialog");
    },
  },
};
</script>
<style scoped>
.form {
  margin-top: 30px;
}

.input-item >>> .el-input__inner {
  border: #00acac solid 2px;
  line-height: 50px;
  height: 50px;
}

.form-item >>> .el-form-item__label {
  line-height: 50px;
  height: 50px;
}

.member-info {
  border: solid 1px #cccccc;
  padding: 20px;
  border-radius: 4px;
  cursor: pointer;
}

.member-info .item {
  height: 20px;
}

.member-info .item .avatar {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  border: solid 1px #cccccc;
  float: left;
}

.member-info .item .value {
  float: left;
  margin-left: 10px;
  width: 200px;
}
</style>
